<template>
  <div  >
    <!-- 展示 用户 提交的数据 -->
    <div  v-for="item in info_attr" :key='item.attrId'>
        <!-- 如果是非图片类型 -->
        <div v-if="item.type !== 'upload'" class="com_show_div">
            <div class="com_show_left">
                <div class="show_span"><span >{{item.attrName}}</span></div>
            </div>
            <div class="com_show_right">
                <div class="show_span"><span>{{item.attrValue}}</span></div>
            </div>
        </div>
        <!-- 如果是图片类型 -->
        <div v-if="item.type === 'upload' && item.attrValue !== ''" class="com_show_div_pic">
            <div class="com_show_left">
                <div class="show_span"><span >{{item.attrName}}</span></div>
            </div>
            <!-- 展示图片 -->
            <div class='com_show_right_pic'>
                <el-image v-for="(url, index) in item.attrValue.split(';')" :key="index"
                    :src="url" fit='contain' ></el-image>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  mounted() {
  },
  props:{
      info_attr: Array,
  },
  data() {
    return {
      
    }
  },
  methods: {
    
  },
}
</script>

<style>

.com_show_div{
    display: flex;
    height: 50px;
}
.com_show_div_pic{
    display: flex;
    height: 150px;
}

/* 左侧 */
.com_show_left{
    width: 100px;
    text-align: center;
    /* background: rgb(163, 95, 95); */
}
.show_span{
    margin-top: 10px;
    font-size: 16px;
}

/* 右侧 */
.com_show_right{
    width: 500px;
    /* background: rgb(255, 142, 142); */
}
.com_show_right_pic{
    width: 500px;
    margin-top: 5px;
    /* background: rgb(255, 142, 142); */
}
.com_show_right_pic .el-image{
    width: 130px; 
    height: 130px;
    margin-left: 20px;
}
</style>